<template>
  <div>
    <div class="flexRow">
      <div style="margin-left: 23px">
        <el-input
            class="input"
            suffix-icon="el-icon-search"
            v-model="searchString"
            clearable
            @keydown.enter.native="search"
        />
        <el-button size="medium" style="width: 160px" @click="search">根据药物名称搜索</el-button>
      </div>
      <div class="flexRow" style="margin-left: auto;margin-right: 10px">
        <el-button class="resource"><i style="font-weight: bold" class="el-icon-tickets"/> 下载Excel模板</el-button>
        <el-button @click="exportMedication"><i style="font-weight: bold" class="el-icon-upload2"/> 导出药品信息</el-button>
        <el-upload
            style="margin-left: 10px"
            :action="'https://'+serverIp + '/medication/import/'+careHomeName"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="checkFileType"
            :show-file-list="false"
        >
          <el-button><i style="font-weight: bold" class="el-icon-download"/> 导入药品信息</el-button>
        </el-upload>
      </div>
    </div>
    <div style="margin: -100px auto 40px"></div>
<!--    <div v-if="list.length === 0" style="position: absolute;left: calc(50% + 100px)">-->
<!--      <div style="text-align: center;margin-top: 20%;font-size: 40px"><i class="el-icon-box"></i></div>-->
<!--      <div style="text-align: center;margin-top: 20px;font-size: 20px">暂无药品信息</div>-->
<!--      <div style="font-size: 10px;text-align: center;margin-top: 100px">点击添加 ＋ 即可新建药品信息</div>-->
<!--    </div>-->
    <div style="margin-top: 130px;overflow-y: scroll;height: calc(100% - 40px);overflow-x: hidden;margin-right: -20px">
      <el-row style="margin-right: 20px">
        <el-col :span="7">
          <el-card class="box-card card" style="height: 266px;width: 360px;cursor: pointer" @click.native="addNew">
            <div style="display: flex;justify-content: center;height: 220px;align-items: center">
              <span style="font-size: 50px" class="el-icon-plus plus"></span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="7" v-for="m in list" :key="m.id">
          <el-card class="box-card card" style="width: 360px;height: 266px">
            <div slot="header" class="clearfix">
              <span class="titleFont">{{ m.name }}</span>

              <el-popconfirm
                  title="确定删除该药品信息吗？"
                  @confirm="delMedication(m.id)"
              >
                <el-button slot="reference" class="circleBtn danger" size="medium" type="danger"
                           icon="el-icon-delete"
                           circle/>
              </el-popconfirm>
              <el-button @click="editCard(m)" class="circleBtn primary" size="medium" type="primary" icon="el-icon-edit"
                         circle/>
            </div>
            <div style="display: flex;flex-direction: column">
              <el-row v-if="m.type">
                <el-col :span="7">药物剂型：</el-col>
                <el-col :span="17">{{ m.type }}</el-col>
              </el-row>
              <el-row v-if="m.mode">
                <el-col :span="7">给药途径：</el-col>
                <el-col :span="17">{{ m.mode }}</el-col>
              </el-row>
              <el-row v-if="m.frequency">
                <el-col :span="10">推荐给药频率：</el-col>
                <el-col :span="14">{{ m.frequency.frequency }}</el-col>
              </el-row>
              <el-row v-if="m.dosage">
                <el-col :span="10">推荐给药剂量：</el-col>
                <el-col :span="14">{{ m.dosage }} {{ m.unit }}</el-col>
              </el-row>
            </div>

          </el-card>
        </el-col>
        <!--在每行不够三个时填充-->
        <el-col :span="7" v-if="(list.length+1)%3!==0"></el-col>
        <el-col :span="7" v-if="(list.length+1)%3===1"></el-col>
      </el-row>
    </div>
    <!--弹窗部分-->
    <el-dialog :visible.sync="dialog"
               :show-close="false"
               ref="dialog"
               :limit="1"
               :modal-append-to-body='false'
               :append-to-body="false"
               @close="closeDialog">
      <h1 style="font-size: 24px;padding-top: 20px;color: var(--deepText)" align="center">
        {{ mode ? '添加' : '修改' }}药物信息
      </h1>
      <el-divider></el-divider>
      <div style="margin: 5% 10% 3%;padding: 3% 5% 1%">
        <el-form ref="form" :model="medication" label-width="140px" label-position="left">
          <el-form-item label="药品名称">
            <el-input
                prefix-icon="el-icon-first-aid-kit"
                v-model="medication.name"
                clearable
                style="width: 80%"
            />
          </el-form-item>
          <el-form-item label="推荐药品剂型">
            <el-select v-model="medication.type" style="width: 120px">
              <el-option value="冲剂"></el-option>
              <el-option value="片剂"></el-option>
              <el-option value="栓剂"></el-option>
              <el-option value="丸剂"></el-option>
              <el-option value="胶囊剂"></el-option>
              <el-option value="颗粒剂"></el-option>
              <el-option value="气雾剂"></el-option>
              <el-option value="软膏剂"></el-option>
              <el-option value="糖浆剂"></el-option>
              <el-option value="注射剂"></el-option>
              <el-option value="口服液体剂"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="推荐给药途径">
            <el-select v-model="medication.mode" style="width: 106px">
              <el-option value="口服给药"></el-option>
              <el-option value="注射给药"></el-option>
              <el-option value="舌下给药"></el-option>
              <el-option value="吸入给药"></el-option>
              <el-option value="直肠给药"></el-option>
              <el-option value="皮下给药"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="推荐给药频率">
            <el-select v-model="medication.frequencyId" style="width: 165px">
              <el-option v-for="f in frequencies" :label="f.frequency" :value="f.id" :key="f.id">
                <el-row>
                  <el-col :span="8" style="font-weight: bold">{{ f.abbreviation }}</el-col>
                  <el-col :span="16"> {{ f.frequency }}</el-col>
                </el-row>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="推荐给药剂量">
            <el-input-number v-model="medication.dosage" :precision="2" :step="0.1" :min="0"></el-input-number>
            <el-select v-model="medication.unit" style="width: 100px;margin-left: 20px" placeholder="单位">
              <el-option value="g">
                <el-row>
                  <el-col :span="14" style="font-weight: bold">g</el-col>
                  <el-col :span="10">克</el-col>
                </el-row>
              </el-option>
              <el-option value="mg">
                <el-row>
                  <el-col :span="14" style="font-weight: bold">mg</el-col>
                  <el-col :span="10">毫克</el-col>
                </el-row>
              </el-option>
              <el-option value="μg">
                <el-row>
                  <el-col :span="14" style="font-weight: bold">μg</el-col>
                  <el-col :span="10">微克</el-col>
                </el-row>
              </el-option>
              <el-option value="ng">
                <el-row>
                  <el-col :span="14" style="font-weight: bold">ng</el-col>
                  <el-col :span="10">纳克</el-col>
                </el-row>
              </el-option>
              <el-option value="ml">
                <el-row>
                  <el-col :span="14" style="font-weight: bold">ml</el-col>
                  <el-col :span="10">毫升</el-col>
                </el-row>
              </el-option>
              <el-option value="μl">
                <el-row>
                  <el-col :span="14" style="font-weight: bold">μl</el-col>
                  <el-col :span="10">微升</el-col>
                </el-row>
              </el-option>
              <el-option value="mg/kg">
                <el-row>
                  <el-col :span="14" style="font-weight: bold">mg/kg</el-col>
                  <el-col :span="10">毫克/公斤</el-col>
                </el-row>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-divider/>
      <div style="display: flex;flex-direction: row">
        <el-button v-if="mode" @click="add" class="formBtn">添加</el-button>
        <el-button v-else @click="edit" class="formBtn">修改</el-button>
        <el-button @click="closeDialog" class="formBtn">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {serverIp} from "../../../../public/config";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Medication",
  data() {
    return {
      //消息列表
      list: [],
      //搜索关键字
      searchString: '',
      //弹窗
      dialog: false,
      //添加的药品
      medication: {},
      //频率列表
      frequencies: [],
      //修改f或添加t
      mode: true,
      //ip
      serverIp: serverIp,
      //养老院名
      careHomeName: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).careHomeName : '',
    }
  },
  methods: {
    //点击添加药品
    addNew() {
      this.mode = true
      this.dialog = true
    },
    //关闭弹窗
    closeDialog() {
      this.medication = {}
      this.dialog = false
    },
    //添加药品
    add() {
      this.medication.careHomeName = this.careHomeName
      this.request.post('/medication/add', this.medication).then(res => {
        if (res.code === '200') {
          this.$notify({
            type: 'success',
            title: '成功',
            message: '添加药品信息成功'
          })
          //添加完成后
          this.dialog = false
          this.load()
        } else {
          this.$notify({
            type: 'error',
            title: '添加药品信息失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '添加药品信息失败',
          message: err
        })
      })
    },
    //获取所有药品信息
    load() {
      this.request.get('/medication/getAll', {
        params: {
          careHomeName: this.careHomeName
        }
      }).then(res => {
        if (res.code === '200') {
          this.list = res.data
        } else {
          this.$notify({
            type: 'error',
            title: '获取药品信息失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '获取药品信息失败',
          message: err
        })
      })
    },
    //点击修改
    editCard(m) {
      this.mode = false
      //浅拷贝点击的药品对象，然后修正字段方便进行编辑
      let medication = {...m}
      if (m.frequency !== null) {
        medication.frequencyId = m.frequency.id
      }
      delete medication.frequency
      //对象修整完后打开弹窗进行编辑
      this.medication = medication
      this.dialog = true
    },
    //修改
    edit() {
      this.request.put('/medication/edit', this.medication).then(res => {
        if (res.code === '200') {
          this.$notify({
            type: 'success',
            title: '成功',
            message: '药品信息修改成功'
          })
          //修改成功后
          this.dialog = false
          this.search()

        } else {
          this.$notify({
            type: 'error',
            title: '药品信息修改失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '药品信息修改失败',
          message: err
        })
      })
    },
    //搜索
    search() {
      this.request.get('/medication/search?keyword=' + this.searchString).then(res => {
        if (res.code === '200') {
          this.list = res.data
        } else {
          this.$notify({
            type: 'error',
            title: '药品信息查询失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '药品信息查询失败',
          message: err
        })
      })
    },
    //删除指定药品信息
    delMedication(id) {
      this.request.delete('/medication/delete/' + id).then(res => {
        if (res.code === '200') {
          this.$notify({
            type: 'success',
            title: '成功',
            message: '药品信息删除成功'
          })
          this.search()
        } else {
          this.$notify({
            type: 'error',
            title: '药品信息删除失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '药品信息删除失败',
          message: err
        })
      })
    },
    //文件上传回调
    uploadSuccess(res) {
      if (res.code === '200') {
        this.$notify({
          type: 'success',
          title: '成功',
          message: '药品信息导入成功',
        })
        this.load()
      } else {
        this.$notify({
          type: 'error',
          title: '药品信息导入失败',
          message: res.msg,
        })
      }
    },
    uploadError(err) {
      this.$notify({
        type: 'error',
        title: '药品信息导入失败',
        message: err,
      })
    },
    checkFileType(file) {
      const tail = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (tail !== 'xlsx' && tail !== 'xls') {
        this.$notify({
          type: 'error',
          title: '文件类型错误',
          message: '上传文件需是Excel文件!'
        })
      }
      return tail === 'xlsx' || tail === 'xls'
    },
    //导出药品
    exportMedication() {
      window.location.href = 'https://' + serverIp + '/medication/export/' + this.careHomeName;
    }
  },
  mounted() {
    //获取药品列表
    this.load()
    //获取全部频率信息
    this.request.get('/medication-frequency/getAll').then(res => {
      if (res.code === '200') {
        this.frequencies = res.data
      } else {
        this.$notify({
          type: 'error',
          title: '获取频率信息失败',
          message: res.msg
        })
      }
    }).catch(err => {
      this.$notify({
        type: 'error',
        title: '获取频率信息失败',
        message: err
      })
    })
  }
}
</script>

<style scoped>

/*滚动条*/
::-webkit-scrollbar {
  overflow: auto;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--th);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--lightText);
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: var(--deepBg);
  border-radius: 5px;
}

/*表格*/
.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
}

.el-row .el-card {
  min-width: 100%;
  height: 100%;
  margin-right: 20px;
  transition: all .5s;
}

>>> .el-col {
  margin: auto;
}

/*card*/
>>> .el-card {
  background-color: var(--lightBg);
  border: var(--inputBorder);
  color: var(--deepText);
  margin-bottom: 20px;
}

>>> .el-card__header {
  border-color: var(--deepText);
}

.box-card:hover {
  background-color: var(--hover);
}


/*按钮*/
.cardBtnStatic {
  cursor: not-allowed;
}

.cardBtnActive {
  cursor: pointer;
}

/*输入框样式*/
.input {
  margin-right: 20px;
  width: 360px;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

>>> .el-input__inner {
  color: var(--deepText);
  background-color: var(--inputBg);
  border: solid 1px var(--inputBorder);
  border-radius: 5px;
}

>>> .el-input__inner:focus {
  border-color: var(--btn) !important;
}

>>> .el-input__inner::placeholder {
  color: var(--lightText);
}

>>> .el-select__caret {
  color: var(--deepText) !important;
}

>>> .el-input__icon {
  color: var(--deepText);
}

/*搜索按钮*/
>>> .el-button--default {
  font-size: 13px;
  font-weight: bold;
  background-color: var(--btn);
  color: var(--btnText);
  border: none;
  transition: 0.2s;
}

>>> .el-button--default:hover {
  background-color: var(--btnActive);
}

/*卡片*/
.card {
  background-color: var(--lightBg);
  border: 1px solid var(--inputBorder);
  color: var(--deepText);
}

.circleBtn {
  margin-top: -5px;
  float: right;
  margin-left: 5px;
  transition: 0.2s;
}

.danger {
  background-color: var(--danger);
  color: var(--btnText);
}

.danger:hover {
  background-color: var(--dangerHover);
}

.primary {
  background-color: var(--btn);
  color: var(--btnText);
}

.primary:hover {
  background-color: var(--btnActive);
}

.plus {
  transition: 0.1s;
}

.card:hover .plus {
  border-color: var(--btn);
  color: var(--btn);
}

.titleFont {
  font-weight: bold;
  font-size: 18px
}

/*弹窗样式*/
>>> .el-dialog {
  background-color: var(--lightBg);
  border-radius: 10px;
  height: 500px;
  width: 700px;
  margin-top: calc(20% - 150px) !important;
}

>>> .el-dialog__body {
  height: 100%;
  padding: 0;
}

>>> .el-dialog__header {
  height: 0;
  padding: 0;
}

>>> .el-dialog__wrapper {
  transition-duration: 0.3s;
}

>>> .dialog-fade-enter-active {
  animation: none !important;
}

>>> .dialog-fade-leave-active {
  transition-duration: 0.15s !important;
  animation: none !important;
}

>>> .dialog-fade-enter-active .el-dialog,
.dialog-fade-leave-active .el-dialog {
  animation-fill-mode: forwards;
}

>>> .dialog-fade-enter-active .el-dialog {
  animation-duration: 0.3s;
  animation-name: anim-open;
  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

>>> .dialog-fade-leave-active .el-dialog {
  animation-duration: 0.3s;
  animation-name: anim-close;
}

@keyframes anim-open {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes anim-close {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale3d(0.5, 0.5, 1);
  }
}

/*分割线*/
>>> .el-divider {
  background-color: var(--divider);
  width: 90%;
  height: 2px;
  margin: auto;
}

/*表单按钮样式*/
.formBtn {
  color: var(--btnText);
  margin: 20px auto;
  width: 140px;
  height: 40px;
  font-size: 14px;
}

>>> .el-form-item__label {
  color: var(--deepText);
}

>>> .el-select-dropdown__item.selected {
  color: var(--btn) !important;
}

/*计数器样式*/
>>> .el-input-number__decrease, >>> .el-input-number__increase {
  background-color: var(--btn);
  color: var(--btnText);
  border: none;
}

>>> .el-input-number__decrease:hover, >>> .el-input-number__increase:hover {
  background-color: var(--btnActive);
  color: var(--btnText);
}

.success {
  background-color: var(--success);
}

.success:hover {
  background-color: var(--successHover);
}

.resource {
  background-color: var(--resource);
}

.resource:hover {
  background-color: var(--resourceHover);
}

.card {
  background-color: var(--lightBg);
  border: 1px solid var(--inputBorder);
  color: var(--deepText);
}
</style>